<template>
  <el-dialog
    title="选择地区"
    :visible.sync="visible"
    :show-close="false"
    :close-on-click-modal="false"
    width="70%">
    <avue-search ref="search"
                 :option="searchOption"
                 v-model="selectedOptions"
                 :key="timerKeyRefresh"
                 @change="handleChange"></avue-search>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="confirm()">确 定</el-button>
      <el-button @click="cancel()">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import {getAreaByType} from "@/api/system";

  export default {
    name: "areaSelect",
    props:{
      visible: {
        type: Boolean,
        default: false
      },
    },
    data() {
      return {
        searchOption: {
          column: [
            {
              label: "省级",
              prop: "province",
              multiple: false,
              dicData: this.getprovince(),
            },
            {
              label: "市级",
              prop: "area",
              multiple: false,
              dicData: [],
            },
            {
              label: "区县",
              prop: "district",
              multiple: false,
              dicData: [],
            },
          ]
        },
        selectedOptions: {
          province: '',
          area: '',
          district: '',
        },
        provincelisttemp: [],
        arealisttemp: [],
        arealisttempdistrict: [],
        dictobj: {
          label: '全部',
          value: '-1',
        },
        provinceName:'',
        areaName:'',
        districtName:'',
        districtCode:null,
        timerKeyRefresh:null,

      }
    },

    methods: {
      getprovince() {
        getAreaByType(Object.assign({
          current: 1,
          size: 200,
          type: "area_code_province"
        })).then(response => {
          let records = response.data.data.records;
          let provincelist = [];
          //加全部
          // provincelist.push(this.dictobj);
          for (let item in records) {
            let dictObj = {
              label: records[item].label,
              value: records[item].value
            };
            provincelist.push(dictObj)
          }
          this.provincelisttemp = provincelist;
          for (let item in this.searchOption.column) {
            if (this.searchOption.column[item].prop == "province") {
              this.searchOption.column[item].dicData = this.provincelisttemp;
            }
          }
        })
      },
      // getarea() {
      //   getAreaByType(Object.assign({
      //     current: 1,
      //     size: 0,
      //     valueLike: '33',
      //     type: "area_code_city"
      //   })).then(response => {
      //     var records = response.data.data.records;
      //     var arealist = [];
      //     //加全部
      //     // arealist.push(this.dictobj);
      //     for (var item in records) {
      //       var dictObj = {
      //         label: records[item].label,
      //         value: records[item].value
      //       };
      //       arealist.push(dictObj)
      //     }
      //     this.arealisttemp = arealist
      //     this.$refs.search.DIC['area'] = this.arealisttemp;
      //   })
      // },
      getAreaMethod(provincecode) {
        getAreaByType(Object.assign({
          current: 1,
          size: 200,
          valueLike: provincecode,
          type: "area_code_city"
        })).then(response => {
          let records = response.data.data.records;
          let arealist = [];

          for (let item in records) {
            let dictObj = {
              label: records[item].label,
              value: records[item].value
            };
            arealist.push(dictObj)
          }
          this.arealisttemp = arealist
          this.$refs.search.DIC['area'] = this.arealisttemp;
        })
      },
      getDistrictMethod(areacode) {
        getAreaByType(Object.assign({
          current: 1,
          size: 200,
          valueLike: areacode,
          type: "area_code_county",
        })).then(response => {
          let records = response.data.data.records;
          let arealist = [];

          for (let item in records) {
            let dictObj = {
              label: records[item].label,
              value: records[item].value
            };
            arealist.push(dictObj)
          }
          this.arealisttempdistrict = arealist
          this.$refs.search.DIC['district'] = this.arealisttempdistrict;


        })
      },
      handleChange() {

      },
      cancel(){
        this.$emit('cancel',this.provinceName+this.areaName+this.districtName, this.districtCode)
      },
      confirm() {
        if(this.districtCode == null){
          this.$notify({
            title: "提醒",
            type: "warning",
            message: "请选择区县",
            duration: 2000
          });
          return;
        }
        this.$emit('getAreaInfo',this.provinceName+this.areaName+this.districtName, this.districtCode)
      },
      refreshTimerKey(){
        this.timerKeyRefresh = new Date().getTime()
      }


    },

    watch: {
      //省级的监听
      'selectedOptions.province'(val) {
        this.districtCode = null;
        //得到省级的名称
        this.provinceName = '';
        for(let item in this.provincelisttemp){
           if(this.provincelisttemp[item].value==val){
              this.provinceName = this.provincelisttemp[item].label;
           }
        }

        this.selectedOptions.district = null;
        this.selectedOptions.area = null;

        //将区县置空

        this.arealisttempdistrict = []
        for (let item in this.searchOption.column) {
          if (this.searchOption.column[item].prop == "district") {
            this.searchOption.column[item].dicData = []
          }
        }
        this.refreshTimerKey()
        // this.$refs.search.DIC['district'] = this.arealisttempdistrict;


        if(val != null && val != ''){
          let provincecode = val.substring(0, 2);
          this.getAreaMethod(provincecode);
        }
      },
      //市级的监听
      'selectedOptions.area'(val) {
        this.districtCode = null;
        //得到市级的名称
        this.areaName = '';
        for(let item in this.arealisttemp){
          if(this.arealisttemp[item].value==val){
            this.areaName = this.arealisttemp[item].label;
          }
        }

        this.selectedOptions.district = null;

        if(val != null && val != ''){
          let areacode = val.substring(0, 4);
          this.getDistrictMethod(areacode);
        }

      },
      //区县的监听
      'selectedOptions.district'(val) {
        this.districtCode = val;
        //得到名称
        this.districtName = '';
        for(let item in this.arealisttempdistrict){
          if(this.arealisttempdistrict[item].value==val){
            this.districtName = this.arealisttempdistrict[item].label;
          }
        }
      },


    },


  }
</script>

<style scoped>

</style>
